<template>
	<view class="blue" :class="{'light':theme=='light'}">
		<view class="list-box">
		   <view class="list" v-for="(item,index) in list" @tap="jumpDetail(item.id)">
			<view class="list-img">
				<text :style="item.time_status==1?'background:#999':'background:#f0b90b'">{{item.time_status==1?$t('zdy.wks'):item.time_status==2?$t('zdy.jxz'):$t('zdy.yjs')}}</text>
				<image :src="item.logo"></image>
			</view>
			<view class="list-content">
				<view class="list-title">
					<view>{{item.title}}</view>
					<text>{{item.summary}}</text>
				</view>
				<view class="list-btm">
				   <article>
					   <text>{{$t('zdy.fhzl')}}</text>
					   <label>{{item.amount}}{{item.currency_name}}</label>
				   </article>
				   <article>
					   <text>{{$t('zdy.jssj')}}</text>
					   <label>{{item.end_at}}</label>
				   </article>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				 page:1,
				  list:[],
				  isAchiveBottom:true,
				  listBool:true,
			}
		},
		computed:{
		   ...mapState(['theme']),
		},
		onShow() {
			this.$utils.setThemeTop(this.theme)
			// this.$utils.setThemeBottom(this.theme)
		},
		onLoad(e) {	
			uni.setNavigationBarTitle({
				title:this.$t('zdy.ieo')
			})
			this.init();
		},
		onPullDownRefresh(){
			this.page=1;
			this.list=[];
			this.init();
		},
		onReachBottom(){
			if(!this.isAchiveBottom)return;
			this.init();
		},
		filters:{
			
		},		
		methods:{
			jumpDetail(id){
				uni.navigateTo({
					url:"/pages/ieo/detail?id="+id
				})
			},
			init(){
			  let that=this;
			  uni.showLoading();
			  if(that.listBool){
				  that.listBool=false;
			  this.$utils.initDataToken({
				  url:"project",
				  data:{
					limit:30,
					page:that.page
				  }
			  },res=>{
				  uni.hideLoading();
				  that.listBool=false;
				  that.page+=1;
				  if(res.list.length){
					that.list=that.list.concat(res.list);
				  }else{
					  that.isAchiveBottom=false;
				  }
			  })
			  }
			},
		}
	}
</script>

<style>
	.list-btm article{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.list-title text{
		height: 60upx;
		max-height: 60upx;
		word-break:break-all;
		    	display:-webkit-box;
		    	-webkit-line-clamp:2;
		    	-webkit-box-orient:vertical;
		    	overflow:hidden;
	}
	.list-box{
	      margin:  10px 5%;
	      display: flex;
	      flex-direction: row;
	      flex-wrap: wrap;
	      position: relative;
	  }
	  .list-content{
	      padding: 10px 5%;
	  }
	  .list{
	      margin-bottom: 10px;
	      background: #fff;
	      position: relative;
	      width:48%;
	      background: #fff;
	  }
	  .list:nth-child(2n){
	      margin-left: 4%;
	  }
	  .list-img{
	      width: 100%;
	      height:130px;
	  }
	  .list-img text{
	      position: absolute;
	      top: 5px;
	      right: 0;
	      padding: 5px 10px ;
	      color:#fff;
		  z-index: 5;
	  }
	  .list-img image{
	      width: 100%;
	      height: 100%;
	  }
	  .list-title text{
	      font-size: 12px;
	      color:#999;
	  }
	  .list-title view{
	      padding-bottom: 5px;
	      margin-bottom: 5px;
	      border-bottom: 1px solid #999;
	      font-size: 16px;
	      font-weight: bold;
	  }
	  .list-btm view{
	        display: flex;
	        flex-direction: row;
	        justify-content: space-between;
	        font-size: 12px;
	        color: #333;
	  }
</style>
